<!-- 内容/样式设置 -->
<div class="right" v-cloak>
  <!-- 页面设置 -->
  <el-card v-if="selectedIndex == -1" class="diy-panel" :body-style="{ padding: '10px' }">
    <div slot="header">
      <span>{{ jsonData.page.name }}</span>
    </div>
    <div class="content-box" style="overflow-y: auto;height: 100%;">
      <div class="group-item">
        <div class="left">模板名称 </div>
        <div class="right">
          <el-input placeholder="请输入模板名称" type="text" v-model="jsonData.page.params.name" size="small" clearable></el-input>
        </div>
      </div>
      <div class="group-item top20">
        <div class="left">页面标题 </div>
        <div class="right">
          <el-input placeholder="请输入页面标题" type="text" v-model="jsonData.page.params.title" size="small" clearable></el-input>
        </div>
      </div>
      <div class="group-item top20" v-if="!jsonData.page.style.showNav">
        <div class="left">标题颜色 </div>
        <div class="right">
          <el-radio-group v-model="jsonData.page.style.titleTextColor" size="small">
            <el-radio-button label="black">黑色</el-radio-button>
            <el-radio-button label="white">白色</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="group-item top20" v-if="!jsonData.page.style.showNav">
        <div class="left">背景 </div>
        <div class="right">
          <el-color-picker v-model="jsonData.page.style.titleBackgroundColor" size="small"></el-color-picker>
          <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(jsonData.page.style, 'titleBackgroundColor', '#fff')">重置</el-button>
        </div>
      </div>
    </div>
  </el-card>
  <!-- 组件设置 -->
  <template v-else>
    <!-- 在线视频 -->
    <el-card v-if="curItem.type == 'videoDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <div class="group-item">
              <div class="left">封面图片 </div>
              <div class="right">
                <img class="images" :src="curItem.params.poster" @click="onEditorSelectImage(curItem.params, 'poster')" style="height: 30px;">
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">播放地址 </div>
              <div class="right">
                <el-input placeholder="请输入播放地址" type="text" v-model="curItem.params.videoUrl" size="small" clearable></el-input>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">自动播放 </div>
              <div class="right">
                <el-radio-group v-model="curItem.params.autoplay" size="small">
                  <el-radio-button label="1">自动</el-radio-button>
                  <el-radio-button label="2">手动</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft"></el-slider>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 图片轮播 -->
    <el-card v-if="curItem.type == 'carouselDiy'" class="diy-panel" :body-style="{padding: '10px'}">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <div slot="header"><span>{{ curItem.name }}</span></div>
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <el-alert title="轮播图片建议尺寸750*360" type="info" :closable="false"></el-alert>
            <draggable :list="curItem.data" :options="{ animation: 120, filter: 'input', preventOnFilter: false }">
              <div class="group-item top10 item-inner" v-for="(carousel, index) in curItem.data">
                <div class="left">
                  <img class="images" :src="carousel.imgUrl">
                </div>
                <div class="right-receive">
                  <el-input class="b-l-6" placeholder="请选择图片或输入图片地址" type="text" v-model="carousel.imgUrl" size="small">
                    <template slot="prepend">图片</template>
                    <el-button slot="append" icon="el-icon-paperclip" @click="onEditorSelectImage(carousel, 'imgUrl')"></el-button>
                  </el-input>
                  <el-input class="b-l-6" placeholder="请选择链接" type="text" v-model="carousel.link?carousel.link.title:carousel.link" size="small" disabled>
                    <template slot="prepend">链接</template>
                    <el-button slot="append" icon="el-icon-paperclip" @click.stop="onEditorSelecturl(carousel)"></el-button>
                  </el-input>
                </div>
                <i class="item-delete el-icon-close" @click="onEditorDeleteData(index, selectedIndex)"></i>
              </div>
            </draggable>
            <div class="top10">
              <el-button class="width100" icon="el-icon-circle-plus-outline" @click.stop="onEditorAddData">添加图片</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">样式 </div>
              <div class="right">
                <el-radio v-model="curItem.params.type" label="normal">常规</el-radio>
                <el-tooltip content="卡片效果仅在前端展示" placement="top" effect="light">
                  <el-radio v-model="curItem.params.type" label="card">卡片</el-radio>
                </el-tooltip>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">切换时间 </div>
              <div class="right">
                <el-input-number v-model="curItem.params.interval" controls-position="right" :min="1000" :max="10000" size="small"></el-input-number>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">图片圆角 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.borderRadius" :min="0" :max="50"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft"></el-slider>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 单图组 -->
    <el-card v-if="curItem.type == 'imagesDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <el-alert title="最佳图片尺寸750*360" type="info" :closable="false"></el-alert>
            <draggable :list="curItem.data" :options="{ animation: 120, filter: 'input', preventOnFilter: false }">
              <div class="group-item top10 item-inner" v-for="(images, index) in curItem.data">
                <div class="left">
                  <img class="images" :src="images.imgUrl">
                </div>
                <div class="right-receive">
                  <el-input class="b-l-6" placeholder="请选择图片或输入图片地址" type="text" v-model="images.imgUrl" size="small">
                    <template slot="prepend">图片</template>
                    <el-button slot="append" icon="el-icon-paperclip" @click="onEditorSelectImage(images, 'imgUrl')"></el-button>
                  </el-input>
                  <el-input class="b-l-6" placeholder="请选择链接" type="text" v-model="images.link?images.link.title:images.link" size="small" disabled>
                    <template slot="prepend">链接</template>
                    <el-button slot="append" icon="el-icon-paperclip" @click.stop="onEditorSelecturl(images)"></el-button>
                  </el-input>
                  <i class="item-delete el-icon-close" @click="onEditorDeleteData(index, selectedIndex)"></i>
                </div>
              </div>
            </draggable>
            <div class="top10">
              <el-button class="width100" icon="el-icon-circle-plus-outline" @click.stop="onEditorAddData">添加图片</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">图片圆角 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.borderRadius" :min="0" :max="50"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft"></el-slider>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 导航组 -->
    <el-card v-if="curItem.type == 'navDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <el-alert title="最佳图片尺寸100*100" type="info" :closable="false"></el-alert>
            <draggable :list="curItem.data" :options="{ animation: 120, filter: 'input', preventOnFilter: false }">
              <div class="group-item top10 item-inner" v-for="(nav, index) in curItem.data">
                <div class="left">
                  <img class="images" :src="nav.imgUrl">
                </div>
                <div class="right-receive">
                  <div class="receive-box">
                    <div class="receive-box-left">颜色 </div>
                    <div class="receive-box-right">
                      <el-color-picker v-model="nav.color" size="small"></el-color-picker>
                      <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(nav, 'color', '#666666')">重置</el-button>
                    </div>
                  </div>
                  <div class="receive-box">
                    <div class="receive-box-left">内容 </div>
                    <div class="receive-box-right">
                      <el-input placeholder="请输入内容" type="text" v-model="nav.text" size="small" clearable></el-input>
                    </div>
                  </div>
                  <el-input class="b-l-6" placeholder="请选择图片或输入图片地址" type="text" v-model="nav.imgUrl" size="small">
                    <template slot="prepend">图片</template>
                    <el-button slot="append" icon="el-icon-paperclip" @click="onEditorSelectImage(nav, 'imgUrl')"></el-button>
                  </el-input>
                  <el-input class="b-l-6" placeholder="请选择链接" type="text" v-model="nav.link?nav.link.title:nav.link" size="small" disabled>
                    <template slot="prepend">链接</template>
                    <el-button slot="append" icon="el-icon-paperclip" @click.stop="onEditorSelecturl(nav)"></el-button>
                  </el-input>
                  <i class="item-delete el-icon-close" @click="onEditorDeleteData(index, selectedIndex)"></i>
                </div>
              </div>
            </draggable>
            <div class="top10">
              <el-button class="width100" icon="el-icon-circle-plus-outline" @click.stop="onEditorAddData">添加导航</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">每行数量 </div>
              <div class="right">
                <el-radio-group v-model="curItem.style.rowsNum" size="small">
                  <el-radio-button label="3">3个</el-radio-button>
                  <el-radio-button label="4">4个</el-radio-button>
                  <el-radio-button label="5">5个</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">图片圆角 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.borderRadius" :min="0" :max="50"></el-slider>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 图片魔方 -->
    <el-card v-if="curItem.type == 'cubeDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <draggable :list="curItem.data" :options="{ animation: 120, filter: 'input', preventOnFilter: false }">
              <div class="group-item item-inner" :class="{top20: index!=0}" v-for="(images, index) in curItem.data">
                <div class="left">
                  <img class="images" :src="images.imgUrl">
                </div>
                <div class="right-receive">
                  <el-input class="b-l-6" placeholder="请选择图片或输入图片地址" type="text" v-model="images.imgUrl" size="small">
                    <template slot="prepend">图片</template>
                    <el-button slot="append" icon="el-icon-paperclip" @click="onEditorSelectImage(images, 'imgUrl')"></el-button>
                  </el-input>
                  <el-input class="b-l-6" placeholder="请选择链接" type="text" v-model="images.link?images.link.title:images.link" size="small" disabled>
                    <template slot="prepend">链接</template>
                    <el-button slot="append" icon="el-icon-paperclip" @click.stop="onEditorSelecturl(images)"></el-button>
                  </el-input>
                  <i class="item-delete el-icon-close" @click="onEditorDeleteData(index, selectedIndex)"></i>
                </div>
              </div>
            </draggable>
            <div class="top10">
              <el-button class="width100" icon="el-icon-circle-plus-outline" @click.stop="onEditorAddData">添加图片</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <el-alert title="橱窗样式最大仅支持4张图片" type="info" :closable="false"></el-alert>
            <div class="group-item top20">
              <div class="left">布局 </div>
              <div class="right">
                <el-radio-group v-model="curItem.style.layout" size="small">
                  <el-radio-button label="2">两列</el-radio-button>
                  <el-radio-button label="3">三列</el-radio-button>
                  <el-radio-button label="4">四列</el-radio-button>
                  <el-radio-button label="-1">橱窗</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft" :min="0" :max="10"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">图片圆角 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.borderRadius" :min="0" :max="50"></el-slider>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 信息卡片 -->
    <el-card v-if="curItem.type == 'infoCardDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <div class="group-item">
              <div class="left">图片 </div>
              <div class="right">
                <img class="images" :src="curItem.params.image" @click="onEditorSelectImage(curItem.params, 'image')" style="height: 30px;">
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">按钮内容 </div>
              <div class="right">
                <el-input placeholder="请输入按钮内容" type="text" v-model="curItem.params.btnTxt" size="small" clearable></el-input>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">标题内容 </div>
              <div class="right">
                <el-input placeholder="请输入标题内容" type="text" v-model="curItem.params.title" size="small" clearable></el-input>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">信息内容 </div>
              <div class="right">
                <el-input placeholder="请输入信息内容" type="textarea" v-model="curItem.params.content" size="small" clearable></el-input>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">链接地址 </div>
              <div class="right">
                <el-input placeholder="请选择链接" type="text" v-model="curItem.params.link?curItem.params.link.title:curItem.params.link" size="small" disabled></el-input>
                <el-button class="m-l-10" size="mini" icon="el-icon-paperclip" @click.stop="onEditorSelecturl(curItem.params)"></el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">图片圆角 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.borderRadius" :min="0" :max="50"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left" style="width: 140px;">按钮背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.btnBackground" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">按钮圆角 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.btnBorderRadius" :min="0" :max="50"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left" style="width: 140px;">按钮字体颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.btnColor" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft" :min="0" :max="25"></el-slider>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 文字按钮 -->
    <el-card v-if="curItem.type == 'textButtonDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <draggable :list="curItem.data" :options="{ animation: 120, filter: 'input', preventOnFilter: false }">
              <div class="group-item item-inner" :class="{top10: index != 0}" v-for="(tItem, index) in curItem.data">
                <div class="right-receive">
                  <div class="receive-box">
                    <div class="receive-box-left">内容 </div>
                    <div class="receive-box-right">
                      <el-input placeholder="请输入内容" type="text" v-model="tItem.text" size="small" clearable></el-input>
                    </div>
                  </div>
                  <div class="receive-box">
                    <div class="receive-box-left">链接 </div>
                    <div class="receive-box-right">
                      <el-input placeholder="请选择链接" type="text" v-model="tItem.link?tItem.link.title:tItem.link" size="small" clearable disabled>
                        <el-button slot="append" icon="el-icon-paperclip" @click.stop="onEditorSelecturl(tItem)"></el-button>
                      </el-input>
                    </div>
                  </div>
                  <div class="receive-box">
                    <div class="receive-box-left">颜色 </div>
                    <div class="receive-box-right">
                      <el-color-picker v-model="tItem.color" size="small"></el-color-picker>
                      <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(tItem, 'color', '#666666')">重置</el-button>
                    </div>
                  </div>
                  <i class="item-delete el-icon-close" @click="onEditorDeleteData(index, selectedIndex)"></i>
                </div>
              </div>
            </draggable>
            <div class="top10">
              <el-button class="width100" icon="el-icon-circle-plus-outline" @click.stop="onEditorAddData">添加按钮</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft" :min="0" :max="25"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">文字尺寸 </div>
              <div class="right">
                <el-input-number v-model="curItem.style.fontSize" controls-position="right" :min="0" :max="50" size="small"></el-input-number>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 文章 -->
    <el-card v-if="curItem.type == 'articleDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <div class="group-item">
              <div class="left" style="width: 140px;">是否显示图片 </div>
              <div class="right">
                <el-switch v-model="curItem.params.showImg" active-value="show" inactive-value="hide"></el-switch>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left" style="width: 140px;">链接地址 </div>
              <div class="right">
                <el-input placeholder="请选择链接" type="text" v-model="curItem.params.link?curItem.params.link.title:curItem.params.link" size="small" disabled></el-input>
                <el-button class="m-l-10" size="mini" icon="el-icon-paperclip" @click.stop="onEditorSelecturl(curItem.params)"></el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">文章数量 </div>
              <div class="right">
                <el-input placeholder="请输入文章数量" type="text" v-model="curItem.params.article_count" size="small" clearable></el-input>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">图片圆角 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.borderRadius" :min="0" :max="50"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft" :min="0" :max="25"></el-slider>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 广告组件 -->
    <el-card v-if="curItem.type == 'adDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <div class="group-item">
              <div class="left">类型 </div>
              <div class="right">
                <el-radio-group v-model="curItem.params.type" size="small">
                  <el-radio-button label="banner">Banner 广告</el-radio-button>
                  <el-radio-button label="custom">原生模板 广告</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">广告id </div>
              <div class="right">
                <el-input placeholder="请输入unit-id" type="text" v-model="curItem.params.adid" size="small" clearable></el-input>
              </div>
            </div>
            <el-alert class="top20" title="说明" type="info" :closable="false">
              <div>
                <p>1. 仅微信小程序可用</p>
                <p>2. 广告单元id，可在小程序管理后台的流量主模块新建</p>
                <p>3. Banner广告适用ad</p>
                <p>4. 原生横幅适用ad-custom</p>
              </div>
            </el-alert>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft" :min="0" :max="25"></el-slider>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 标题单元 -->
    <el-card v-if="curItem.type == 'titleUnitDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <div class="group-item">
              <div class="left">明文 </div>
              <div class="right">
                <el-input placeholder="请输入明文内容" v-model="curItem.params.title1" size="small" clearable></el-input>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">暗文 </div>
              <div class="right">
                <el-input placeholder="请输入暗文内容" v-model="curItem.params.title2" size="small" clearable></el-input>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">右侧文字 </div>
              <div class="right">
                <el-input placeholder="右侧文字（为空则为不显示）" v-model="curItem.params.title3" size="small" clearable></el-input>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">链接地址 </div>
              <div class="right">
                <el-input placeholder="请选择链接" type="text" v-model="curItem.params.link?curItem.params.link.title:curItem.params.link" size="small" disabled></el-input>
                <el-button class="m-l-10" size="mini" icon="el-icon-paperclip" @click.stop="onEditorSelecturl(curItem.params)"></el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左侧字体颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.textColor" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'textColor', '#0441f5')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">右侧字体颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.rightColor" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'textColor', '#999999')">重置</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 图文按钮 -->
    <el-card v-if="curItem.type == 'buttonDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <div class="group-item">
              <div class="left">按钮内容 </div>
              <div class="right">
                <el-input placeholder="请输入按钮内容" type="text" v-model="curItem.params.text" size="small" clearable></el-input>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">图标 </div>
              <div class="right">
                <img class="images" :src="curItem.params.imgUrl" @click="onEditorSelectImage(curItem.params, 'imgUrl')" style="height: 30px;margin-right: 30px;">
                <el-radio-group v-model="curItem.params.showImg" size="small">
                  <el-radio-button :label="true">显示</el-radio-button>
                  <el-radio-button :label="false">隐藏</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">链接地址 </div>
              <div class="right">
                <el-input placeholder="请选择链接" type="text" v-model="curItem.params.link?curItem.params.link.title:curItem.params.link" size="small" disabled></el-input>
                <el-button class="m-l-10" size="mini" icon="el-icon-paperclip" @click.stop="onEditorSelecturl(curItem.params)"></el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">按钮颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.btnBackground" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'btnBackground', '#409EFF')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">框线颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.borderColor" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'borderColor', '')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">文字颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.color" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'color', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">按钮高度 </div>
              <div class="right">
                <el-input-number v-model="curItem.style.height" controls-position="right" :min="0" :max="1000" size="small"></el-input-number>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">框线尺寸 </div>
              <div class="right">
                <el-input-number v-model="curItem.style.borderSize" controls-position="right" :min="0" :max="500" size="small"></el-input-number>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">文字尺寸 </div>
              <div class="right">
                <el-input-number v-model="curItem.style.fontSize" controls-position="right" :min="0" :max="50" size="small"></el-input-number>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">图标尺寸 </div>
              <div class="right">
                <el-input-number v-model="curItem.style.iconSize" controls-position="right" :min="0" :max="1000" size="small"></el-input-number>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">按钮圆角 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.borderRadius" :min="0" :max="50"></el-slider>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 地图 -->
    <el-card v-if="curItem.type == 'mapDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <div class="group-item">
              <div class="left">经度 </div>
              <div class="right">
                <el-tooltip content="浮点数，范围 -180 ~ 180" placement="top" effect="light">
                  <el-input-number v-model="curItem.params.latitude" controls-position="right" :min="-180" :max="180" size="small"></el-input-number>
                </el-tooltip>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">纬度 </div>
              <div class="right">
                <el-tooltip content="浮点数，范围 -90 ~ 90" placement="top" effect="light">
                  <el-input-number v-model="curItem.params.longitude" controls-position="right" :min="-180" :max="180" size="small"></el-input-number>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">地图高度 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.height" :min="60" :max="500"></el-slider>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 标题 -->
    <el-card v-if="curItem.type == 'titleDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <div class="group-item">
              <div class="left">内容 </div>
              <div class="right">
                <el-input placeholder="请输入内容" type="text" v-model="curItem.params.title" size="small" clearable></el-input>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">按钮文字 </div>
              <div class="right">
                <el-input placeholder="请输入按钮文字" type="text" v-model="curItem.params.btnText" size="small" clearable></el-input>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">链接地址 </div>
              <div class="right">
                <el-input placeholder="请选择链接" type="text" v-model="curItem.params.link?curItem.params.link.title:curItem.params.link" size="small" disabled></el-input>
                <el-button class="m-l-10" size="mini" icon="el-icon-paperclip" @click.stop="onEditorSelecturl(curItem.params)"></el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">标题颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.color" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'color', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">标题尺寸 </div>
              <div class="right">
                <el-input-number v-model="curItem.style.fontSize" controls-position="right" :min="0" :max="50" size="small"></el-input-number>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">标题样式 </div>
              <div class="right">
                <el-radio-group v-model="curItem.style.fontStyle" size="small">
                  <el-radio-button label="normal">正常</el-radio-button>
                  <el-radio-button label="italic">斜体</el-radio-button>
                  <el-radio-button label="bold">加粗</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">按钮颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.btnColor" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'btnColor', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">按钮尺寸 </div>
              <div class="right">
                <el-input-number v-model="curItem.style.btnSize" controls-position="right" :min="0" :max="50" size="small"></el-input-number>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 辅助线条 -->
    <el-card v-if="curItem.type == 'lineDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <div class="content-box" style="overflow-y: auto;height: 100%;">
        <div class="group-item">
          <div class="left">背景颜色 </div>
          <div class="right">
            <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
            <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">线条样式 </div>
          <div class="right">
            <el-radio-group v-model="curItem.style.lineStyle" size="small">
              <el-radio-button label="solid">实线</el-radio-button>
              <el-radio-button label="dashed">虚线</el-radio-button>
              <el-radio-button label="dotted">点状</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">线条颜色 </div>
          <div class="right">
            <el-color-picker v-model="curItem.style.lineColor" size="small"></el-color-picker>
            <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'lineColor', '#000000')">重置</el-button>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">线条高度 </div>
          <div class="right">
            <el-slider class="width100" v-model="curItem.style.lineHeight" :min="1" :max="50"></el-slider>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">上下边距 </div>
          <div class="right">
            <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">左右边距 </div>
          <div class="right">
            <el-slider class="width100" v-model="curItem.style.paddingLeft"></el-slider>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 广播 -->
    <el-card v-if="curItem.type == 'noticeDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <div class="group-item">
              <div class="left">公告图标 </div>
              <div class="right">
                <img class="images" :src="curItem.params.icon" @click="onEditorSelectImage(curItem.params, 'icon')" style="height: 30px;margin-right: 30px;">
                <el-radio-group v-model="curItem.params.showImg" size="small">
                  <el-radio-button :label="true">显示</el-radio-button>
                  <el-radio-button :label="false">隐藏</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">公告内容 </div>
              <div class="right">
                <el-input placeholder="请输入内容" type="textarea" v-model="curItem.params.text" size="small" clearable></el-input>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">文字颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.textColor" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'textColor', '#000000')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">文字尺寸 </div>
              <div class="right">
                <el-input-number v-model="curItem.style.fontSize" controls-position="right" :min="0" :max="50" size="small"></el-input-number>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">图标尺寸 </div>
              <div class="right">
                <el-input-number v-model="curItem.style.iconSize" controls-position="right" :min="0" :max="100" size="small"></el-input-number>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 辅助空白 -->
    <el-card v-if="curItem.type == 'blankDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <div class="content-box" style="overflow-y: auto;height: 100%;">
        <div class="group-item">
          <div class="left">背景颜色 </div>
          <div class="right">
            <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
            <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">组件高度 </div>
          <div class="right">
            <el-input-number v-model="curItem.style.height" controls-position="right" :min="0" :max="10000" size="small"></el-input-number>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 文本组 -->
    <el-card v-if="curItem.type == 'textDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <div class="content-box" style="overflow-y: auto;height: 100%;">
        <div class="group-item">
          <div class="left">文本内容 </div>
          <div class="right">
            <el-input placeholder="请输入文本内容" type="textarea" v-model="curItem.style.text" size="small" clearable></el-input>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">背景颜色 </div>
          <div class="right">
            <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
            <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">上下边距 </div>
          <div class="right">
            <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">左右边距 </div>
          <div class="right">
            <el-slider class="width100" v-model="curItem.style.paddingLeft"></el-slider>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">字体颜色 </div>
          <div class="right">
            <el-color-picker v-model="curItem.style.textColor" size="small"></el-color-picker>
            <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'textColor', '#000000')">重置</el-button>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">字体大小 </div>
          <div class="right">
            <el-input-number controls-position="right" v-model="curItem.style.fontsize" :min="10" :max="50" size="small"></el-input-number>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">文本位置 </div>
          <div class="right">
            <el-radio-group v-model="curItem.style.textAlign" size="small">
              <el-radio-button label="left">居左</el-radio-button>
              <el-radio-button label="center">居中</el-radio-button>
              <el-radio-button label="right">居右</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">文本样式 </div>
          <div class="right">
            <el-radio-group v-model="curItem.style.fontStyle" size="small">
              <el-radio-button label="normal">正常</el-radio-button>
              <el-radio-button label="italic">斜体</el-radio-button>
              <el-radio-button label="bold">加粗</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 背景音乐 -->
    <el-card v-if="curItem.type == 'bgmDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <div class="content-box" style="overflow-y: auto;height: 100%;">
        <div class="group-item">
          <div class="left">音频地址 </div>
          <div class="right">
            <el-input placeholder="请输入音频地址" type="text" v-model="curItem.params.musicUrl" size="small"></el-input>
            <el-button class="m-l-10" size="mini" icon="el-icon-paperclip" @click.stop="onEditorSelectImage(curItem.params, 'musicUrl','mp3/')"></el-button>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">底部边距 </div>
          <div class="right">
            <el-slider class="width100" v-model="curItem.style.bottom"></el-slider>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">右边距 </div>
          <div class="right">
            <el-slider class="width100" v-model="curItem.style.right"></el-slider>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">透明度 </div>
          <div class="right">
            <el-slider class="width100" v-model="curItem.style.opacity"></el-slider>
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">播放图标 </div>
          <div class="right">
            <img class="images" :src="curItem.params.playImgUrl" @click="onEditorSelectImage(curItem.params, 'playImgUrl')" style="height: 30px;">
          </div>
        </div>
        <div class="group-item top20">
          <div class="left">暂停图标 </div>
          <div class="right">
            <img class="images" :src="curItem.params.stopImgUrl" @click="onEditorSelectImage(curItem.params, 'stopImgUrl')" style="height: 30px;">
          </div>
        </div>
      </div>
    </el-card>
    <!-- 富文本 -->
    <el-card v-if="curItem.type == 'richTextDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <div class="group-item">
              <div class="left">内容 </div>
              <div class="right">
                <el-button type="primary" size="small" @click.stop="onEditorRichtext(curItem.params)">打开编辑器</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">卡片圆角 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.borderRadius"></el-slider>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 警告提示 -->
    <el-card v-if="curItem.type == 'warnDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <div class="group-item">
              <div class="left">左侧图标 </div>
              <div class="right">
                <el-radio-group v-model="curItem.params.showIcon" size="small">
                  <el-radio-button :label="true">显示</el-radio-button>
                  <el-radio-button :label="false">隐藏</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">关闭按钮 </div>
              <div class="right">
                <el-radio-group v-model="curItem.params.closable" size="small">
                  <el-radio-button :label="true">显示</el-radio-button>
                  <el-radio-button :label="false">隐藏</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">标题内容 </div>
              <div class="right">
                <el-input placeholder="请输入标题内容" type="text" v-model="curItem.params.title" size="small" clearable></el-input>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">信息内容 </div>
              <div class="right">
                <el-input placeholder="请输入信息内容" type="textarea" v-model="curItem.params.description" size="small" clearable></el-input>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">主题类型 </div>
              <div class="right">
                <el-radio-group v-model="curItem.params.type" size="small">
                  <el-radio-button label="success">成功</el-radio-button>
                  <el-radio-button label="warning">警告</el-radio-button>
                  <el-radio-button label="info">消息</el-radio-button>
                  <el-radio-button label="error">错误</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">主题样式 </div>
              <div class="right">
                <el-radio-group v-model="curItem.params.effect" size="small">
                  <el-radio-button label="light">亮</el-radio-button>
                  <el-radio-button label="dark">暗</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 时间线 -->
    <el-card v-if="curItem.type == 'timelineDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <el-alert title="时间线使用了uView1.x库，若您的项目中已有uView1.x，请将components/u-time-line与u-time-line-item删除即可" type="info" :closable="false"></el-alert>
            <draggable :list="curItem.data" :options="{ animation: 120, filter: 'input', preventOnFilter: false }">
              <div class="group-item top10 item-inner" v-for="(tItem, index) in curItem.data">
                <div class="right-receive">
                  <div class="receive-box">
                    <div class="receive-box-left">节点颜色 </div>
                    <div class="receive-box-right">
                      <el-color-picker v-model="tItem.color" size="small"></el-color-picker>
                      <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(tItem, 'color', '#0FAFFF')">重置</el-button>
                    </div>
                  </div>
                  <div class="receive-box">
                    <div class="receive-box-left">选择日期 </div>
                    <div class="receive-box-right">
                      <el-date-picker size="small" v-model="tItem.time" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
                      </el-date-picker>
                    </div>
                  </div>
                  <div class="receive-box">
                    <div class="receive-box-left">时间显示 </div>
                    <div class="receive-box-right">
                      <el-radio-group v-model="tItem.hide" size="small">
                        <el-radio-button :label="true">显示</el-radio-button>
                        <el-radio-button :label="false">隐藏</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>

                  <div class="receive-box">
                    <div class="receive-box-left">内容 </div>
                    <div class="receive-box-right">
                      <el-input placeholder="请输入内容" type="textarea" v-model="tItem.content" size="small" clearable></el-input>
                    </div>
                  </div>

                  <i class="item-delete el-icon-close" @click="onEditorDeleteData(index, selectedIndex)"></i>
                </div>
              </div>
            </draggable>
            <div class="top10">
              <el-button class="width100" icon="el-icon-circle-plus-outline" @click.stop="onEditorAddData">添加节点</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">背景颜色 </div>
              <div class="right">
                <el-color-picker v-model="curItem.style.background" size="small"></el-color-picker>
                <el-button class="m-l-10" size="mini" @click.stop="onEditorResetColor(curItem.style, 'background', '#ffffff')">重置</el-button>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">上下边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingTop"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">左右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.paddingLeft"></el-slider>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 悬浮按钮 -->
    <el-card v-if="curItem.type == 'floatDiy'" class="diy-panel" :body-style="{ padding: '10px' }">
      <div slot="header"><span>{{ curItem.name }}</span></div>
      <el-tabs v-model="curItem.activeName">
        <el-tab-pane label="内容设置" name="first">
          <div class="content-box">
            <div class="group-item">
              <div class="left">图标 </div>
              <div class="right">
                <img class="images" :src="curItem.params.image" @click="onEditorSelectImage(curItem.params, 'image')" style="height: 30px;">
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">事件类型 </div>
              <div class="right">
                <el-radio-group v-model="curItem.params.type" size="small">
                  <el-radio-button label="service">小程序客服</el-radio-button>
                  <el-radio-button label="link">链接</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="group-item top20" v-if="curItem.params.type === 'link'">
              <div class="left">链接地址 </div>
              <div class="right">
                <el-input placeholder="请选择链接" type="text" v-model="curItem.params.link?curItem.params.link.title:curItem.params.link" size="small" disabled></el-input>
                <el-button class="m-l-10" size="mini" icon="el-icon-paperclip" @click.stop="onEditorSelecturl(curItem.params)"></el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="second">
          <div class="content-box">
            <div class="group-item">
              <div class="left">底部边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.bottom"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">右边距 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.right"></el-slider>
              </div>
            </div>
            <div class="group-item top20">
              <div class="left">透明度 </div>
              <div class="right">
                <el-slider class="width100" v-model="curItem.style.opacity"></el-slider>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </template>
</div>